<template>
  <view class="confirmOrder">
    <scroll-view
      :style="{ height: mainHeight }"
      scroll-y
      v-if="addressList.length > 0"
    >
      <view
        class="address"
        v-for="(item, index) in addressList"
        :key="index"
        @click="selectedAddress(item)"
      >
        <view class="haveAddress">
          <view class="nameAphone">
            <view class="name">{{ item.realName }}</view>
            <view class="phone">{{ item.phone }}</view>
          </view>
          <view class="address_info">{{
            item.province + item.city + item.district + item.detail
          }}</view>
          <view class="default_item">
            <view
              class="default"
              @click.stop="handleTriggerSelect(item)"
              :class="item.isDefault == 0 ? 'selected' : ''"
            >
              <uni-icons
                class="selected-icon"
                v-if="item.isDefault == 0"
                type="checkbox-filled"
                color="#ff4254"
                size="20"
              ></uni-icons>
              <uni-icons
                v-else
                type="circle"
                color="#ff4254"
                size="20"
              ></uni-icons>
              <view class="defaultText" v-if="item.isDefault == 0"
                >已设为默认</view
              >
              <view class="defaultText" v-else>设为默认</view>
            </view>
            <view class="operate">
              <view class="delet" @click.stop="deletFun(item.id)">删除</view>
              <view class="edit" @click.stop="editFun(item.id)">编辑</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <Empty v-else />
    <view class="bottom">
      <view class="submit" @click="editFun()">新建收货地址</view>
    </view>
  </view>
</template>

<script>
import address from "@/api/address.js";
export default {
  data() {
    return {
      addressList: [],
      displayTime: "",
      source: "",
      mainHeight: "",
    };
  },
  onLoad(options) {
    if (options.source) this.source = options.source;
    this.mainHeight =
      this.$store.getters.heightData.noTabMainHeight - 65 + "px";
  },
  onShow() {
    this.getAddressList();
  },
  methods: {
    getAddressList() {
      address.addressList().then((res) => {
        if (res.code == 200) {
          this.addressList = res.rows;
        }
      });
    },
    // 选择地址
    selectedAddress(item) {
      if (this.source != "order") return;
      uni.setStorageSync("selectedAddress", item);
      uni.navigateBack();
    },
    handleTriggerSelect(item) {
      if (item.isDefault == 0) {
        uni.showToast({
          title: "该地址已是默认地址",
          icon: "none",
        });
        return;
      }
      let params = {
        ...item,
        isDefault: 0,
      };
      address.updateAddress(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "修改成功",
            icon: "none",
          });
          this.getAddressList();
        }
      });
    },
    deletFun(id) {
      address.deleteAddressIds({ ids: [id] }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "删除成功",
            icon: "none",
          });
          this.getAddressList();
        }
      });
    },
    editFun(id) {
      if (id) {
        uni.navigateTo({
          url: "/subPages/mine/editAddress?id=" + id,
        });
      } else {
        uni.navigateTo({
          url: "/subPages/mine/editAddress",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.confirmOrder {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  padding: 0 30rpx;
  box-sizing: border-box;

  .address {
    width: 100%;
    height: 230rpx;
    background-color: #fff;
    margin-top: 25rpx;
    border-radius: 10px;
    padding: 20rpx 25rpx;
    box-sizing: border-box;

    &.selected {
      border: none;

      .selected-icon {
        margin: 2rpx;
        color: #fff !important;
      }
    }

    .haveAddress {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .nameAphone {
        width: 100%;
        height: 40%;
        display: flex;
        align-items: center;
        color: #000;
        font-weight: 400;

        .name {
          margin-right: 20rpx;
        }
      }

      .address_info {
        font-size: 25rpx;
        color: #000;
        font-weight: 600;
        line-height: 40rpx;
        letter-spacing: 1rpx;
      }
    }

    .default_item {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .default {
        display: flex;
        // align-items: center;

        color: #ff4254;
      }

      .operate {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .edit {
          color: #ff4254;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: 150rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15rpx 30rpx;
    font-size: 30rpx;

    .submit {
      width: 80%;
      height: 80rpx;
      background-color: #000;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 25px;
    }
  }
}
</style>
